$.ajax({
    url: `/api/getcarts/${JSON.parse(sessionStorage.getItem("userInfo"))[0].uId}`,
    type: 'get'
}).then(function (res) {
    console.log(res);
    let { data } = res;
    let strHtml = ``
    data.forEach(item => {
        strHtml += `
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>图片</th>
                    <th style="width:250px">名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>删除</th>
                </tr>
            </thead>
                <tr>
                    <td>${item.cId}</td>
                    <td><img src=${item.cImg} /></td>
                    <td>${item.cName}</td>
                    <td>${item.cPrice}</td>
                    <td>
                        <button class='sub'>-</button>
                        <input value=${item.cNum} style='width:30px'>
                        <button class='sup'>+</button>
                    </td>
                    <td>${item.cTotal}</td>
                    <td><a class='del'>删除</a></td>
                </tr>
                <tbody id="tab"></tbody>
        </table>
            `
    });

    $(".box .box1").html(strHtml);
})

$(function () {
    //减法
    $('.box .box1').on("click", ".sub", function () {
        let num = $(this).next().val();
        num--;
        if (num <= 1) {
            num = 1;
        }
        $(this).next().val(num);
        let price = $(this).parents("tr").children().eq(3).text();
        $(this).parents("tr").children().eq(5).text(price * num);

        $.ajax({
            url: "/api/modify",
            type: "post",
            data: {
                cId: $(this).parents("tr").children().eq(0).text(),
                cNum: num
            }
        }).then(function (res) {
            let { msg } = res;
            layer.msg(msg);
        })
    })
    //加法
    $('.box .box1').on("click", ".sup", function () {
        let num = $(this).prev().val();
        num++;
        $(this).prev().val(num);

        let price = $(this).parents("tr").children().eq(3).text();
        $(this).parents("tr").children().eq(5).text(price * num);

        $.ajax({
            url: "/api/modify",
            type: "post",
            data: {
                cId: $(this).parents("tr").children().eq(0).text(),
                cNum: num
            }
        }).then(function (res) {
            let { msg } = res;
            layer.msg(msg);
        })
    })

    //删除
    $('.box .box1').on("click", ".del", function () {

        layer.confirm("确定要删除吗?", {
            btn: ["没钱拉,不买了~", "不删除"]
        }, (index) => {
            //购物车的编号  
            let cId = $(this).parents("tr").children().eq(0).text()

            $.ajax({
                url: "/api/delete",
                type: "post",
                data: {
                    cId
                }
            }).then((res) => {
                let { msg, code } = res;
                layer.msg(msg);
                if (code == 200) {
                    $(this).parents("tr").remove();
                }
            });

            layer.close(index);//询问框,关闭

        }, () => {

        })

    })
})